<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>盒子1</div>
    <div>盒子2</div>
    <div>盒子3</div>
    <script>
        // 1. 查找一个元素, 找到的是第一个匹配的元素, 给的是选择器
        // document.querySelector 内置的对象的方法
        const divDom = document.querySelector('div')
        console.log(divDom)
        // 打印 dom 对象, 建议使用 console.dir
        console.dir(divDom)
        setTimeout(() => {
            // 2.修改元素
            // 改完之后页面会更新
            divDom.innerHTML = '教练, 我想打篮球'
        }, 3000)

        // 2.查找多个元素
        // divArr 有 length 属性, 有 forEach
        // 但是没有 push, filter 等数组的其他方法
        // 所以属于 伪数组, 也是通过下标取值
        const divArr = document.querySelectorAll('div')
        console.log(divArr)
        setTimeout(() => {
            divArr.forEach(v => {
                v.innerHTML = '闻说鸡鸣见日升'
            })
        }, 4000)
    </script>
</body>
</html>